<template>
  <div class="content">
    <div class="head">
      <img class="bj" src="https://zxsd-oss-img.oss-cn-chengdu.aliyuncs.com/e7bcedcae7b34066787c3d1347b8969be2e65b432e93b9e4989ebfd7b385327f.jpg" alt="" />
      <div class="tx_box">
        <div class="tx">
          <img :src="userMsg.avatar" alt="" />
          <div class="msg">
            <p class="name">{{ userMsg.nickname }}</p>
            <p class="text">我的ID号：{{ userMsg.id }}</p>
          </div>
        </div>
        <p class="label" @click="toBalance">查看余额明细</p>
      </div>
    </div>
    <div class="balance">
      <img src="/static/wallet-icon1.png" alt="" />
      <div>
        <p class="title">账户余额</p>
        <p class="price" v-if="walletInfo">
          <span>¥</span>{{ (walletInfo.balance / 100).toFixed(2) }}
        </p>
        <p class="price" v-else><span>¥</span>0.00</p>
      </div>
    </div>
    <div class="reflect_box">
      <div class="title_box">
        <p class="title">提现明细</p>
        <!-- <img src="/static/closeMsg.png" alt="" /> -->
      </div>
      <div v-if="cashOutList.length > 0">
        <scroll-view
          class="list_box"
          refresher-enabled
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          scroll-y
          :style="{ height: isIphoneXnum ? 'calc(60vh)' : 'calc(40vh)' }"
        >
          <div class="list" v-for="item in cashOutList" :key="item.id">
            <div class="left">
              <p class="title">提现</p>
              <p class="title">手续费</p>
              <p class="time">{{ $Date(item.createTime) }}</p>
            </div>
            <div>
              <p class="price">-{{ item.price }}</p>
              <p class="sxf">-{{ item.fee }}</p>
            </div>
          </div>
          <div v-if="loading">
            <u-loading-icon
              mode="circle"
              text="加载中..."
              timing-function="linear"
            />
          </div>
        </scroll-view>
      </div>
      <div class="no_data" v-else>
        <img src="/static/no-data.png" alt="" />
        <p>暂无相关提现明细哦～</p>
      </div>
    </div>

    <div class="anniu_box">
      <div class="box" :style="{ paddingBottom: isIphoneXnum + 'px' }">
        <p @click="toRecharge">充值</p>
        <p @click="toCashOut">提现</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      userMsg: {},
      isIphoneXnum: 0,
      cashOutList: [],
      total: 0,
      query: {
        pageNo: 1,
        pageSize: 10,
      },
      walletInfo: {},
      refreshing: false,
      loading: false,
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
    }),
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      if (this.loading) return
      this.refreshing = true
      this.getList()
    },
    async getWallet() {
      const res = await api.wallet.get()
      this.walletInfo = res?.data
    },
    getList() {
      if (!this.refreshing) {
        this.loading = true
      }
      api.wallet.cash_list(this.query).then((res) => {
        if (res.code == 200) {
          this.cashOutList = res.data.list.map((v) => {
            v.price = (v.amount / 100).toFixed(2)
            v.fee = (v.fee / 100).toFixed(2)
            return v
          })
          this.total = res.total
        } else {
          this.cashOutList = []
          this.total = 0
        }
        setTimeout(() => {
          this.refreshing = false
          this.loading = false
        }, 500)
      })
    },
    async getUserInfo() {
      const res = await api.user.sell_user({
        userId: this.userId,
      })
      this.userMsg = res.data
    },
    // 跳转充值
    toRecharge() {
      uni.navigateTo({
        url: "/pages/wallet/recharge/index",
      })
    },
    toCashOut() {
      uni.navigateTo({
        url: "/pages/wallet/cashout/index",
      })
    },
    toBalance() {
      uni.navigateTo({
        url: "/pages/wallet/balanceDetails/index",
      })
    }
  },
  onShow() {
    this.getWallet()
    this.getUserInfo()
    this.getList()
    uni.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model)
        let modelmes = res.model
        if (
          modelmes.search("iPhone 16") != -1 ||
          modelmes.search("iPhone 15") != -1 ||
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25
        } else {
          this.isIphoneXnum = 0
        }
      },
    })
  },
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #f7f7f7;

  .head {
    position: relative;

    .bj {
      width: 100%;
      height: 330rpx;
      position: absolute;
      top: 0;
    }

    .tx_box {
      position: relative;
      margin: 0 30rpx 0 30rpx;
      top: 56rpx;
      display: flex;
      justify-content: space-between;

      .tx {
        display: flex;

        img {
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
        }

        .msg {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          color: #fff;
          margin-left: 22rpx;

          .name {
            font-size: 40rpx;
            font-weight: 500;
          }

          .text {
            font-size: 26rpx;
          }
        }
      }

      .label {
        padding: 0 14rpx;
        height: 42rpx;
        line-height: 42rpx;
        background: rgba(216, 216, 216, 0.15);
        border-radius: 100rpx;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }

  .balance {
    position: relative;
    height: 192rpx;
    border-radius: 12rpx;
    padding: 0 30rpx;
    background: #fff;
    border-radius: 12rpx;
    background: #ffffff;
    margin: 116rpx 30rpx 0 30rpx;
    box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.05);

    img {
      position: absolute;
      right: 0;
      top: 0;
      width: 280rpx;
      height: 192rpx;
    }

    div {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 26rpx;
        color: #333333;
        margin: 10rpx 0;
      }

      .price {
        font-size: 80rpx;
        font-weight: 500;
        color: #23ac39;

        span {
          font-size: 26rpx;
          margin-right: 10rpx;
        }
      }
  
    }
  }

  .reflect_box {
    margin: 42rpx 30rpx 0 30rpx;

    .title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;

      img {
        width: 32rpx;
        height: 28rpx;
      }
    }

    .list_box {
      margin-top: 20rpx;
    }

    .list {
      padding: 26rpx;
      background: #fff;
      border-radius: 8rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 30rpx;
        color: #666666;
        margin-bottom: 6rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }

      .price {
        font-size: 30rpx;
        font-weight: 500;
        color: #3b74f5;
      }
      .sxf {
        color: #23ac39;
        font-size: 30rpx;
      }
    }

    .no_data {
      text-align: center;
      margin-top: 100rpx;

      img {
        width: 320rpx;
        height: 320rpx;
      }

      p {
        font-size: 24rpx;
        color: #999999;
        margin-top: -40rpx;
      }
    }
  }

  .anniu_box {
    width: 100%;

    .box {
      width: 92%;
      height: 150rpx;
      line-height: 150rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 0 30rpx;
      z-index: 100;
      display: flex;
      justify-content: space-between;

      p {
        width: 46%;
        height: 96rpx;
        line-height: 96rpx;
        background-color: #23ac39;
        border: 1px solid transparent;
        border-radius: 100rpx;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;

        &:last-child {
          background: none;
          border-color: #23ac39;
          color: #23ac39;
        }
      }
    }
  }
}
</style>
